<template>
  <div class="movie-list"
       v-loading="loading">
    <ul>
      <li v-for="(item, index) in totalList"
          :key="index">
        <div style="width: 220px;height: auto;">
          <div class="movie-list__time"
               @mouseleave="handleLeave"
               @mouseenter="handlePrevEnter(index)"
               @click="handleClinkImage(item)">
            <el-row>
              <el-col :span="7"
                      :offset="17">
                <icon-svg style="width:2em;height:2em;color:red;padding:0px 3px;float:left;"
                          iconClass="start"></icon-svg>
                <div style="margin:5px 0;"
                     v-text="handlePlayerCount(item.playCount)"></div>
              </el-col>
              <el-col :span="4"
                      :offset="10">
                <div v-show="index === isActive"
                     style="width:40px;height:40px;background-color:gray;border-radius:50%;">
                  <icon-svg style="width:2em;height:2em;color:red;margin:8px 11px;"
                            iconClass="start_red"></icon-svg>
                </div>
              </el-col>
              <el-col :span="6"
                      :offset="18">
                <span style="line-height:40px;text-align:center;display:inline-block;padding:7px;">3:23</span>
              </el-col>
            </el-row>
          </div>
          <el-image lazy
                    :class="{animated:index === isActive, heartBeat:index=== isActive}"
                    style="border-radius: 10px;height:120px;"
                    :src="item.cover? item.cover:item.picUrl"></el-image>
          <div class="movie-list__detail">
            <span>{{item.name}}</span>
          </div>
          <div class="movie-list__editor">
            <span class="movie-list__editor-by">by</span>
            <span class="movie-list__editor-name">{{item.artistName}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import '../icons/start_red.svg'
import { getMovieList } from '../request/api.js'
export default {
  name: 'movieList',
  data () {
    return {
      isActive: -1,
      totalList: [],
      loading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      // this.loading = true
      getMovieList().then((res) => {
        if (typeof res.data !== 'undefined' || typeof res.result !== 'undefined') {
          if (typeof res.result !== 'undefined' && res.result.length !== 0) {
            this.totalList = res.result
          } else if (typeof res.data !== 'undefined' && res.data.length !== 0) {
            this.totalList = res.data
          } else {
            return this.$message.error('获取失败')
          }
        } else {
          return this.$message.error('获取失败')
        }
        this.loading = false
      })
    },
    handlePrevEnter (val) {
      this.isActive = val
    },
    handleLeave () {
      this.isActive = -1
    },
    handleImageStartEnter (val) {
      this.isActive = val
    },
    handlePlayerCount (val) {
      if (typeof val !== 'undefined' && parseInt(val) > 10000) {
        return (parseInt(val) / 10000).toFixed(1) + '万'
      } else {
        return val
      }
    },
    handleClinkImage (item) {
      this.$emit('getDetail', item)
    }
  }
}
</script>
<style scoped>
/* 视频css*/
.movie-list {
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
}
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.movie-list ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.movie-list ul li {
  font-weight: 700;
  color: purple;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: auto;
  width: auto;
  cursor: pointer;
  text-align: center;
  margin: 5px auto;
  flex: auto; /*这是关键*/
}
.movie-list__detail span {
  display: inline-block;
  text-align: left;
  width: 220px;
  font-size: 13px;
  color: gray;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 5px;
}
.movie-list__detail span:hover {
  cursor: pointer;
  color: purple;
}
.movie-list__editor {
  height: 30px;
}
.movie-list__editor span {
  display: inline-block;
  font-size: 12px;
  color: gray;
  margin-top: -3px;
}
.movie-list__editor-by {
  width: 30px;
  text-align: center;
}
.movie-list__editor-name {
  width: 180px;
  text-align: left;
}
.movie-list__editor-name:hover {
  color: purple;
}
.movie-list__playicon {
  width: 110px;
  height: 120px;
  position: absolute;
  float: left;
  z-index: 999;
}
.movie-list__time {
  width: 220px;
  height: 120px;
  position: absolute;
  float: right;
  z-index: 999;
}
.movie-list__time .el-col {
  color: #acb8cc;
  height: 40px;
  font-size: 12px;
}
.movie-list__playernum:nth-child(2) {
  padding: 33px 0;
}
image-detail__item {
  display: inline-flex;
  color: #acb8cc;
  width: 100%;
  height: 30px;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 100px;
}

.image-detail__item .el-link--inner {
  font-weight: bold;
  color: #ffffff;
}

.image-detail__start {
  height: 90px;
  width: 170px;
  z-index: 999;
  margin-left: -170px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* */
</style>
